<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1 >Ant Design Of Angular</h1>
      </a>
    </div>
      <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
          <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>

          <ng-template #menuTpl let-menus>
              <ng-container *ngFor="let menu of menus">

                  <li nz-menu-item nzMatchRouter *ngIf="!menu.children"  [nzPaddingLeft]="menu.level * 24"  [routerLink]="menu.url">
                      <i nz-icon [nzType]="menu.icon" *ngIf="menu.icon"></i><span>{{ menu.title }}</span>
                  </li>

                  <li nz-submenu *ngIf="menu.children"  [nzPaddingLeft]="menu.level * 24" [nzOpen]="menu.open" [nzTitle]="menu.title" [nzIcon]="menu.icon" >
                      <ul>
                          <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
                      </ul>
                  </li>

              </ng-container>
          </ng-template>
      </ul>
  </nz-sider>
  <nz-layout>

    <nz-header>
        <nz-layout class="layout">
            <nz-header>
                <div class="logo"></div>
                <ul nz-menu nzTheme="dark" nzMode="horizontal">
                    <li nz-menu-item>nav 1</li>
                    <li nz-menu-item>nav 2</li>
                    <li nz-menu-item>nav 3</li>
                </ul>
            </nz-header>
            <nz-content>
                <nz-breadcrumb>
                    <nz-breadcrumb-item>Home</nz-breadcrumb-item>
                    <nz-breadcrumb-item>List</nz-breadcrumb-item>
                    <nz-breadcrumb-item>App</nz-breadcrumb-item>
                </nz-breadcrumb>
                <div class="inner-content">Content</div>
            </nz-content>
            <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
        </nz-layout>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed"><i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i></span>
        <button nz-button nzType="primary" (click)="visible  = !visible">Open</button>
      </div>
    </nz-header>
    <nz-content class="app-content">
        <nz-breadcrumb style="margin:16px 0;">
            <nz-breadcrumb-item>控制面板</nz-breadcrumb-item>
            <nz-breadcrumb-item>分析页</nz-breadcrumb-item>
        </nz-breadcrumb>
        <nz-card class="inner-content">
            <router-outlet></router-outlet>
        </nz-card>
        <nz-footer style="text-align: center;">Ant Design ©2019 Implement By Angular</nz-footer>
    </nz-content>
  </nz-layout>
</nz-layout>
<nz-drawer [nzClosable]="false"  [nzVisible]="visible" [nzPlacement]="'left'" nzTitle="系统切换" (nzOnClose)="visible  = !visible"   [nzBodyStyle]="{padding:0}"	>
  <ul nz-menu [style]="{}">
    <li nz-menu-item>系统 1</li>
    <li nz-menu-item>系统 3</li>
    <li nz-menu-item>系统 4</li>
    <li nz-menu-item>系统 5</li>
    <li nz-menu-item>系统 6</li>
    <li nz-menu-item>系统 7</li>
    <li nz-menu-item>系统 8</li>
  </ul>
</nz-drawer>
